
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags"%>
<%@ taglib prefix="security" uri="http://www.springframework.org/security/tags" %>

<script type="text/javascript"
        src="<%=request.getContextPath()%>/script/whereused_question.js"></script>
<!-- Menu -->
<jsp:include page="menu.jsp" />
<!--START: Subnav -->
<div class="sub_nav">
    <ul>
        <li>
            <a href="view.html?id=${question.questionId}"><img src="<%=request.getContextPath()%>/images/menu/sub_general_off.gif"
                                                                   width="114" height="18" alt="gernal" />
            </a>
        </li>
        <li>
            <a href="#"><img src="<%=request.getContextPath()%>/images/menu/sub_where_used_on.gif"
                                 width="114" height="18" alt="gernal" />
            </a>
        </li>
    </ul>
</div>
<!--END: Subnav -->
<!--START: conent -->
<div class="content2">
    <div class="insider">
        <div class="corners">
            <div class="corners_top"></div>

            <div class="column1">
                <table width="750" border="0" cellspacing="4" class="formlayout_table">
                    <tr>
                        <th width="160"><label>ID:</label></th>
                        <td width="287">${question.refId}</td>
                        <th width="152"><label>Status:</label></th>
                        <td width="131">${question.questionStatusType.code}</td>
                    </tr>
                    <tr>
                        <th><label>Version:</label></th>
                        <td>${question.version}</td>
                        <th><label>Availability:</label></th>
                        <td>${question.questionAvailabilityType.code}</td>
                    </tr>
                    <tr>
                        <th><label>Name:</label></th>
                        <td>${question.name}</td>                       
                    </tr>
                    <tr>
                        <th><label>Vocabulary Name:</label></th>
                        <td>${question.vocabularyname}</td>
                        <th><label>Last Modified Date:</label></th>
                        <td>
                            <fmt:formatDate value="${question.modifiedOn}" pattern="dd-MMM-yyyy" />
                        </td>
                    </tr>
                    <tr>
                        <th><label>Last Modified By:</label></th>
                        <td>${question.modifiedBy.username}</td>
                    </tr>
                    <tr>
                        <th><label>Question Text:</label></th>
                        <td colspan="3">${question.text}</td>
                    </tr>
                </table>
            </div>

            <ul class="functions1 fun1_2">

                <li>
                    <a href="list.html?checkSearch=list">
                        <img src="<%= request.getContextPath()%>/images/btn/functions1/back_to_results.gif" class="btn" />
                    </a>
                </li>

                <security:authorize ifAnyGranted="ROLE_PORTAL_USER, ROLE_AUTHOR">
                    <li>
                        <c:if test="${question.questionStatusType.code=='active' && question.questionAvailabilityType.code=='open'}">
                            <a href="#" id="editquestion">
                                <img src="<%= request.getContextPath()%>/images/btn/functions1/btn_edit.gif" class="btn" />
                            </a>
                        </c:if>
                        <c:if test="${question.questionStatusType.code=='retired' || question.questionAvailabilityType.code=='locked'}">
                            <a href="#"><img src="<%= request.getContextPath()%>/images/btn/functions1/btn_edit_tint.gif" width="122" height="23"/></a>
                        </c:if>
                    </li>
                </security:authorize>
            </ul>
            <div class="corners_bottom"></div>
        </div>

        <div class="error">
            <h3>
                ${questionerror}
                <style> p { margin:0px }</style>
                <font color="red">
                    <p id="Msg_retire" style="display:none;">${Msg_retire}</p>
                    <p id="Msg_lock" style="display:none;">${Msg_lock}</p>
                </font>
            </h3>
            <div class="display_mode">
                <h4>Display mode:</h4>
                <ul>
                    <li id="brief" onclick="briefMode();"><a href="#">Brief</a></li>
                    <li id="full" class="active" onclick="fullMode();"><a href="#">Full</a></li>
                </ul>
            </div>
        </div>

        <!-- Function View and Edit -->
        <ul class="functions2">
            <li class="view">
                <a href="#" onclick="clickAction('../questionset/view',false)" >
                    <img id="viewButton" src="<%=request.getContextPath()%>/images/btn/functions2/btn_view_light.gif"
                         width="68" height="23" alt="view" class="btn" />
                </a>
            </li>
            <security:authorize ifAnyGranted="ROLE_PORTAL_USER, ROLE_AUTHOR">
                <li>
                    <a href="#" onclick="itemClickAction('../questionset/edit')" >
                        <img id="editButton" src="<%=request.getContextPath()%>/images/btn/functions2/btn_edit_light.gif"
                             width="69" height="23" alt="view" class="btn" />
                    </a>
                </li>
            </security:authorize>
        </ul>

        <!-- Questionnaire List -->
        <table width="100%" cellspacing="0" class="data_thead">
            <thead>
            <tr>
                 <th width="15%">
                    Name
                </th>
                <th width="10%">
                    ID
                </th>
                <th width="10%">
                    Version
                </th>
                <th width="15%">
                    Status
                </th>
                <th width="12%">
                    Availability
                </th>
                <th width="38%">
                    Title
                </th>
            </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <div id="dataList" class="data_tbody">
            <c:forEach var="qsin" items="${questionSets}">
                <div onclick="itemWhereClick(this, 'id=${qsin.questionSetId}','${qsin.status.code}','${qsin.availability.code}');" onmouseover="itemHover(this);"
                     onmouseout="itemMouseOut(this);">
                    <table width="100%" cellspacing="0" class="data_tbody_title">
                        <tbody>
                            <tr>
                                <td width="15%" class="id_number">${qsin.name}</td>
                                <td width="10%" class="id_number">${qsin.refId}</td>
                                <td width="10%">${qsin.version}</td>
                                <td width="15%">${qsin.status.name}</td>                                
                                <td width="12%">${qsin.availability.name}</td>
                                <td width="25%">${qsin.displayTitle}</td>
                                <td width="13%"><fmt:formatDate value="${qsin.modifiedOn}" pattern="MM/dd/yyyy" /></td>
                            </tr>
                            <tr>
                                <td colspan="5" class="tro"></td>
                            </tr>
                        </tbody>
                    </table>
                    <table width="726" border="0" cellspacing="0" class="tro">
                        <tr>
                            <td width="153">User: <strong>${qsin.modifiedBy.username}</strong></td>
                            <td width="269">
                                Last modified:
                                <fmt:formatDate value="${qsin.modifiedOn}" pattern="MM/dd/yyyy" />
                            </td>
                            <td width="298" class="end">Vocabulary Name: <strong>${qsin.vocabularyname}</strong></td>
                        </tr>
                        <tr>
                            <td colspan="2" class="end"><strong>${qsin.description}</strong></td>
                        </tr>
                    </table>
                </div>
            </c:forEach>
        </div>
    </div>
</div>
<!--END: conent -->
<script type="text/javascript">
    var qavailability = "${question.questionAvailabilityType.code}";
    var qstatus = "${question.questionStatusType.code}";
    $(document).ready(function() { //data_tbody brief
        $("#editquestion").click(function (){
            $("#Msg_lock").hide();
            $("#Msg_retire").hide();
            if (qstatus == "retired"){
                $("#Msg_lock").hide();
                $("#Msg_retire").show();
                return false;
            }
            if (qavailability=="locked"){
                $("#Msg_retire").hide();
                $("#Msg_lock").show();
                return false;
            }
            if (qstatus == "active" && qavailability=="open"){
                $("#Msg_lock").hide();
                $("#Msg_retire").hide();
                window.location.href="edit.html?id="+${question.questionId};
            }
        });
    });
    var lightColorFlag = "_light.";
    var status = "";
    var availability = "";
    function itemWhereClick(item, params,qStatus,qAvailability) {
        // $("div.data_tbody div").removeClass("active");
        // $(item).addClass("active");        
        $("#Msg_lock").hide();
        $("#Msg_retire").hide();
        if($(item).attr("class").indexOf("active") == -1){
            $("div.data_tbody div").removeClass("active");
            $(item).addClass("active");
            var viewimgSrc = $("#viewButton").attr("src");
            var editimgSrc = $("#editButton").attr("src");
            var viewnewSrc = viewimgSrc.replace(lightColorFlag, '.');

            $("#viewButton").attr("src", viewnewSrc);            
            if (qStatus == "retired" || qAvailability == "locked"){
                if (editimgSrc.indexOf(lightColorFlag)==-1){
                    var editnewSrc2 = editimgSrc.replace('.',lightColorFlag);                    
                    $("#editButton").attr("src", editnewSrc2);
                }
            }else {
                if(editimgSrc){
                   var editnewSrc = editimgSrc.replace(lightColorFlag, '.');
                   $("#editButton").attr("src", editnewSrc);
                }
            }
            status = qStatus;
            availability = qAvailability;
        }else {
            $("div.data_tbody div").removeClass("active");
            var viewimgSrc = $("#viewButton").attr("src");
            var editimgSrc = $("#editButton").attr("src");
            var viewnewSrc = viewimgSrc.replace('.',lightColorFlag);
            
            $("#viewButton").attr("src", viewnewSrc);
            if (editimgSrc.indexOf("_light")==-1){
                var editnewSrc = editimgSrc.replace('.',lightColorFlag);
            	$("#editButton").attr("src", editnewSrc)
            }
            
            status = "";
            availability = "";
        }
    itemParams = params;

}
function itemClickAction(action) {
    if (itemParams == "") {
        alert("Please select an item.");
    } else {
        if (status == "active" && availability=="open"){
            $("#Msg_lock").hide();
            $("#Msg_retire").hide();
            window.location.href=action + ".html?" + itemParams;
        }
        if (status == "retired"){
            $("#Msg_lock").hide();
            $("#Msg_retire").show();
            return false;
        }
        if (availability=="locked"){
            $("#Msg_retire").hide();
            $("#Msg_lock").show();
            return false;
        }

    }
}
</script>